<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        {{msg}}
        <!-- <p v-if="a">内容</p> -->
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            // data作用:设置当前Vue实例所管理的视图中  使用的数据
            // data的值可以是一个对象
            // 1. 可以在视图中, 通过{{}}使用数据msg
            // 2. 可以通过Vue实例对象.属性的方式的使用数据 vm.msg
            // 3. 可以通过vm._data.msg访问数据(不建议)
            // 4. 也可以在视图中,通过'指令'去使用数据 指令的值="data中的数据"
            // data中的数据的特点:响应式数据(msg发生变化, 视图中使用msg的位置都会被Vue重新编译(渲染)

            data: {
                a: true,
                msg: '你好'
            }
        });
        console.log(vm);
        // vm._data.msg
        // console.log(vm.msg);
    </script>
</body>

</html>